<template>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    :immediate-check="false"
    :offset="10"
  >
    <ul class="ulist">
      <li v-for="(l,i) in list" :key="i" class="item">
          <div @click.stop  class="item-link"  >
              <router-link :to="{name:'film',params:{filmId:l.filmId},query:{name:l.name}}" class="left-img">
                  <img :src="l.poster"  alt="" class="img">
              </router-link>
              <div class="m-right">
                  <h3 class="name-top">
                    <span class="name">{{l.name}}</span>
                    <span class="dd"> {{l.item.name }} </span>
                  </h3>
                  <p class=" ptext ">
                    观众评分: <span class="grade"> {{l.grade}}</span>
                  </p>
                  <p class="ptext actors van-ellipsis">
                    主演: 
                    <span v-for="(item,index) in l.actors" :key="index">
                        {{item.name}}
                    </span>
                  </p>
                  <p class="ptext">
                    {{l.nation}} |  {{ l.runtime}} 分钟 
                  </p>
              </div>
              <van-button @click.stop="gotocinemas(l)" class="btn-buy">购票</van-button>
          </div>
      </li>
    </ul>

    </van-list>
</van-pull-refresh>
</template>


<script>
export default {
  props:['list','loadmore','refreshdata'],
  data(){
    return {
      loading:false,   // 是否正在请求数据
      finished:false, 
      isLoading:false,  // 判断是否正在刷新 
    }
  },
  methods:{
    gotocinemas(item){
      this.$router.push({
        name:"cinemas",
        params:{
          filmId:item.filmId
        }
      })
    },
    onRefresh(){
        this.isLoading = true;
        setTimeout(()=>{
          this.refreshdata(()=>{
             this.isLoading = false; // 刷新结束
             this.$toast("下拉刷新成功")
          })
        },800)
    },
    onLoad(){   // 加载更多  
      setTimeout(()=>{
        this.loadmore(()=>{
           this.finished = true;
           this.$toast("数据已经见底了")
        },()=>{
          this.loading  = false;
          this.$toast("数据添加完毕")
        })
      },500)
    }
  }
}
</script>

<style lang="scss" scoped>
.ulist{
  width:100%;
  .item{
    margin-top:1px;
   width:100%;
    .item-link{
      width:100%;
       padding:15px;
       display: flex;
       position: relative;
       background: #fff;
       .img{
         width: 66px;
         height:106px;
         margin-right:15px;
       }
       .m-right{
         flex:1;
         flex-shrink: 0;  // 不能被压缩
         .name-top{
           margin-top:6px;
         }
        .name{
          max-width: calc(100% - 25px);
          color: #191a1b;
          font-size: 16px;
          height: 22px;
          line-height: 22px;
          margin-right: 5px;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
        } 
        .dd{
            font-size: 12px;
            color: #fff;
            background-color: #d2d6dc;
            height: 14px;
            line-height: 14px;
            padding: 0 2px;
            border-radius: 2px;
            margin-top:-6px;
        }
        .ptext{
          font-size: 13px;
          margin-top: 6px;
          color: #797d82;
        }
        .grade{
          color:#f50;
        }
        .actors{
          width:260px;

        }
       }

       .btn-buy{
          line-height: 25px;
          height: 25px;
          width: 56px;
          color: #ff5f16;
          font-size: 12px;
          text-align: center;
          border-radius: 2px;
          position: absolute;
          right:10px;
          top:40%;
          transform: translate(0,-40%);
          border-radius: 4px;
       }
    }
  }
}
</style>

